
 
 <template>
 	<view>
		<u-dropdown ref="uDropdown">
			<u-dropdown-item v-model="value1" :title="title" >
				<view class="slot-content" style="background-color: #FFFFFF;overflow-y: auto;box-sizing: border-box;padding: 0 0 0 20rpx; ">
					<u-collapse ref="collapse" :accordion="false">
						<scroll-view scroll-y style="max-height: 800rpx;">
							<view class="allItem" @click="takeWorkId()">
								<view>全部</view>
								<view class="">
									<view v-show="idActive===0">
										<u-icon color="#2979ff" name="checkbox-mark"></u-icon>
									</view>
								</view>
							</view>
							<u-collapse-item v-for="(item,index) in list" :title="item.sentry_name" :key="item.sentry_id">
								<view 
									class="miniItem" 
									v-for="(itm,idx) in item.children" 
									:key="itm.sentry_id" 
									@click="takeWorkId(itm)"
								>
									<view :style="{color:(itm.sentry_id==idActive)?'#2979ff':''}">{{itm.sentry_name}}</view>
									<view class="">
										<view v-show="itm.sentry_id==idActive">
											<u-icon color="#2979ff" name="checkbox-mark"></u-icon>
										</view>
									</view>
								</view>
							</u-collapse-item>
						</scroll-view>
					</u-collapse>
				</view>
			</u-dropdown-item>
		</u-dropdown>
	</view>
</template>
 
 <script>
 	export default {
		props:{
				list: {
					type: Array,
					default: function() {
						return []
					}
				}
		},
		data(){
			  return{
				  value1: 1,
				  value2: 2,
				  value3: 3,
				  idActive:null,//通过岗位id来控制勾选框的显示与隐藏、
				  title:"全部岗位"
			  }
		},
		methods:{
			takeWorkId(itm={sentry_id:0,sentry_name: "全部"}){
				this.idActive=itm.sentry_id
				this.title=itm.sentry_name
				let id=itm.sentry_id
				this.$emit("workId",{id})
				this.$refs.uDropdown.close();
			}
		},
 		onReady() {
 			wx.nextTick(() => {
 				setTimeout(() => this.$refs.collapse.init(), 300)
 			})
 		}
 	
	
	}
 </script>
 
 <style lang="less" scoped>
	.allItem{
		box-sizing: border-box;
		width: 750rpx;
		height: 80rpx;
		background: #ffffff;
		box-sizing: border-box;
		padding: 0 40rpx 0 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
 	.miniItem {
 		box-sizing: border-box;
 		width: 750rpx;
 		height: 80rpx;
 		background: #ffffff;
 		box-sizing: border-box;
 		padding: 0 40rpx 0 20rpx;
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 
 		view {
 			height: 40rpx;
 			font-size: 28rpx;
 			font-family: PingFangSC, PingFangSC-Regular;
 			font-weight: 400;
 			text-align: center;
 			color: #262626;
 			line-height: 40rpx;
 		}
 	}
 </style>
 